<template>
	<div class = "wrap" @click = "close">
		<div class = "searchBar">
			<input type="text" placeholder="输入作者或标题关键字" class = "keyWord">
			<span class = "iconfont search">&#xe632;</span>
			<span class = "iconfont close" @click = "close">&#xe624;</span>
		</div>
	</div>
</template>

<script>
export default {
	name : "search",
	methods : {
		close (e) {
			if(e.target.className == "iconfont search" || e.target.className == 'keyWord') {
				return;
			}
			this.$emit('change','topHeader')
		}
	}
}
</script>

<style scoped lang = "less">
	.wrap {
		position: fixed;
		top:0;
		left:0;
		bottom:0;
		right:0;
		z-index:99;
		background: rgba(0,0,0,0.4);
		> .searchBar {
			width:100%;
			height:1rem;
			line-height:1rem;
			background: #fff;
			display: flex;
			font-size:.34rem;
			input {
				flex:1;
				outline: none;
				border:none;
				padding-left:.4rem;
			}
			span {
				float:right;
				width:1rem;
				text-align:center;
				font-size:.36rem;
				&:first-of-type {
					color:#00b7ee;
				}
			}
		}
	}
</style>